<template>
    <div class="home-real-time-data">
        <div>
            <h2 class="real-time-data--title">实时数据</h2>
            <div class="real-time-data--top">
                <span class="top--num">{{ realTimeData }}</span>
                <span class="top--trend">{{ trend }}<i class="top--trend--arrow"></i></span>
            </div>
        </div>
        <div class="real-time-data--table">
            <el-table
                    :data="realTimeDataArr"
                    :row-style="tableRowStyle"
                    :cell-style="cellStyle"
                    :header-cell-style="headerStyle">
                <el-table-column type="index" label="排名"/>
                <el-table-column label="国家">
                    <template slot-scope="scope">
                        <img class="country-img" :src="require(`../../assets/${scope.row.img}`)"/>
                        <span>{{ toThousands(scope.row.country) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数据量">
                    <template slot-scope="scope">
                        <span>{{ toThousands(scope.row.dataSize) }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HomeRealTimeData',
        data() {
            return {
                realTimeData: 0,
                trend: '',
                realTimeDataArr: []
            }
        },
        beforeMount() {
            setTimeout(() => {
                this.realTimeData = 0;
                this.trend = "5.0%";
                this.realTimeDataArr = [
                    {country: "美国", img: "logo.png", dataSize: 1285258678},
                    {country: "美国", img: "logo.png", dataSize: 285258678},
                    {country: "美国", img: "logo.png", dataSize: 85258678},
                    {country: "美国", img: "logo.png", dataSize: 5258678},
                    {country: "美国", img: "logo.png", dataSize: 258678},
                    {country: "美国", img: "logo.png", dataSize: 158678},
                    {country: "美国", img: "logo.png", dataSize: 128678},
                    {country: "美国", img: "logo.png", dataSize: 18678},
                    {country: "美国", img: "logo.png", dataSize: 12678},
                    {country: "美国", img: "logo.png", dataSize: 12558}
                ]
            }, 1000)
        },
        methods: {
            // 控制表格隔行变色
            tableRowStyle({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return {"background": "#f99"}
                } else {
                    return {"background": "#99f"}
                }
            },
            // 表头文本居中
            headerStyle({row, column, rowIndex, columnIndex}) {
                return {"text-align": "center"}
            },
            // 表格文本对齐
            cellStyle({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0) {
                    return {"text-align": "center"}
                }
                if (columnIndex === 2) {
                    return {"text-align": "right"}
                }
            },
            // 数字每3位加逗号
            toThousands(num) {
                var numStr = (num || 0).toString(), result = '';
                while (numStr.length > 3) {
                    result = ',' + numStr.slice(-3) + result;
                    numStr = numStr.slice(0, numStr.length - 3);
                }
                if (numStr) {
                    result = numStr + result;
                }
                return result;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .home-real-time-data {
        .real-time-data--top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .top--num {
                font-size: 30px;
            }
            .top--trend {
                font-size: 20px;
                .top--trend--arrow {
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    background: #f99;
                }
            }
        }
        .real-time-data--table {
            .country-img {
                display: inline-block;
                width: 1rem;
                vertical-align: middle;
            }
        }
    }
</style>
